// app global css in SCSS form

/*
   修改浏览器默认滚动条样式
// https://www.jb51.net/css/728172.html
// https://zhuanlan.zhihu.com/p/144204013
*/

/* 修改全局样式 BEGIN */
body {
  // 左侧菜单栏active状态，默认颜色
  --q-color-menu-bg-active: rgba(2, 255, 2, 0.43);
}
.coadmin-header,
.coadmin-footer,
.coadmin-page,
.coadmin-popup,
.coadmin-dialog {
  // 按钮高度缩小
  .q-field__control, .q-field__marginal {
    height: 45px;
  }
  .q-field--dense .q-field__control, 
  .q-field--dense .q-field__marginal {
    height: 35px;
  }
  .q-tab {
    padding: 0 5px 0 12px;
  }
  .q-tabs--dense .q-tab {
    min-height: 32px;
  }
  .q-field--auto-height .q-field__control,
  .q-field--auto-height .q-field__native {
    // min-height: 45px;
    min-height: auto;
  }
  .q-field--auto-height.q-field--dense .q-field__control,
  .q-field--auto-height.q-field--dense .q-field__native {
    // min-height: 35px;
    min-height: auto;
  }
  .q-field__label {
    top: 15px;
  }
  .q-field--dense .q-field__label {
    top: 8px;
  }
}
/* 修改全局样式 END */

.coadmin-sidebar {
  &-menu-active {
    background-color: var(--q-color-menu-bg-active);
  }
  .q-item.q-link {
    border-radius: 5px;
    margin-left: 5px;
    margin-right: 5px;
  }
  .q-item__label + .q-item__label {
    margin-top: 0;
  }
}

// 隐藏DropDown按钮右侧的下箭头
.btn-dropdown-hide-droparrow {
  &.q-btn-dropdown--simple .q-btn-dropdown__arrow {
    display: none;
  }
}

.coadmin-header {
  .q-tab__content {
    min-width: auto !important;
  }
}

.coadmin-sidebar {
  .q-item__section--avatar {
    min-width:40px;
  }

  /* 左侧导航菜单滚动条 */
  .q-scrollarea__bar--v,
  .q-scrollarea__thumb--v {
    width: 6px;
    opacity: 0.35;
    border-radius: 5px;
  }
}

.coadmin-page {
}

.coadmin-table {
  /*
  // 表格slot：top 里面
  .q-table__top {
    padding: 4px 3px 8px 0px;
    .q-col-gutter-x-md, .q-col-gutter-md {
      margin-left: 0;
      & > * {
        padding-left: 8px;
      }
    }
    .q-space {
      padding-left: 0;
    }
  } */
  &.q-table--dense {
    .q-table__top,
    .q-table__bottom {
      padding: 6px 6px;
    }
  }
  .q-table__top,
  .q-table__bottom {
    padding: 12px 6px;
  }
}

.coadmin-dialog {
  .q-dark {
    background: $grey-9;
  }

  /* 使用v-drag，会导致对话框在小屏幕占满左右两边，这里增加一点空隙 */
  .q-dialog__inner--minimized {
    // margin: 10px;
    padding: 10px 24px;
  }
  /* 改成16px以便跟 q-card__section 有相同的边距好对齐 */
  .q-card__actions {
    padding: 16px;
  }

}

.coadmin-popup {
  &.q-dark,
  .q-dark {
    background: $grey-9;
  }
  /* 使用v-drag，会导致对话框在小屏幕占满左右两边，这里增加一点空隙 */
  .q-dialog__inner--minimized {
    // margin: 10px;
    padding: 10px 24px;
  }
  /* 改成16px以便跟 q-card__section 有相同的边距好对齐 */
  .q-card__actions {
    padding: 16px;
  }
}

.coadmin-form {
  /* 验证失败样式 begin */
  .q-field {
    &__bottom--animated {
      left: -5px;
      bottom: 18px !important;
      z-index: 10;
      .q-field__messages {
        & div {
          width: max-content;
          border-radius: 5px;
          background: $negative;
          color: #fff;
          padding: 5px;
        }
      }
    }
  }
  &.gutter {
    .q-field {
      &--with-bottom {
        padding-bottom: 0;
      }
    }
  }
  .q-field {
    &--with-bottom {
      padding-bottom: 0;
    }
  }
  /* 验证失败样式 end */

  /* 缩小表格输入框直接的垂直间距 */
  .q-col-gutter-y-md > *,
  .q-col-gutter-md > * {
    padding-top: 14px;
  }

  /* 当组件剩余空间很富裕时，上方对齐，默认是居中 */
  .q-field > .q-field__inner {
    justify-content: flex-start;
  }
}

.coadmin-table-sticky-header {
  /* 表格头部锁定 begin */
  &.q-dark .q-table__top,
  &.q-dark .q-table__bottom,
  &.q-dark thead tr:first-child th {/* bg color is important for th; just specify one */
    background-color: $dark;
  }
  .q-table__top,
  .q-table__bottom,
  thead tr:first-child th {/* bg color is important for th; just specify one */
    background-color: #fff;
  }
  thead tr th {
    position: sticky;
    z-index: 1;
  }
  thead tr:first-child th {
    top: 0;
  }

  /* this is when the loading indicator appears */
  &.q-table--loading thead tr:last-child th {
    /* height of all previous header rows */
    // top: 48px;
  }
  /* 表格头部锁定 end */
}

.coadmin-table-sticky-first-column {
  &.q-dark td:first-child,
  &.q-dark thead tr:first-child th:first-child {
    /* bg color is important for th; just specify one */
    background-color: $dark;
  }
  td:first-child,
  thead tr:first-child th:first-child {
    /* bg color is important for th; just specify one */
    background-color: #fff;
  }
  th:first-child,
  td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
  }
}

.coadmin-table-sticky-last-column {
  &.q-dark td:last-child,
  &.q-dark thead tr:last-child th:last-child {
    /* bg color is important for th; just specify one */
    background-color: $dark;
  }

  td:last-child,
  thead tr:last-child th:last-child {
    /* bg color is important for th; just specify one */
    background-color: #fff;
  }
  th:last-child,
  td:last-child {
    padding-right: 6px !important;
    position: sticky;
    right: 0;
    z-index: 1;
  }
  td:last-child {
    box-shadow:  inset 1px 0px 0px 0px #bcbcbc;
  }
}

.coadmin-table-sticky-first-and-last-column {
  &.q-dark td:first-child,
  &.q-dark thead tr:first-child th:first-child {
    /* bg color is important for th; just specify one */
    background-color: $dark;
  }
  td:first-child,
  thead tr:first-child th:first-child {
    /* bg color is important for th; just specify one */
    background-color: #fff;
  }
  th:first-child,
  td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
  }


  &.q-dark td:last-child,
  &.q-dark thead tr:last-child th:last-child {
    /* bg color is important for th; just specify one */
    background-color: $dark;
  }
  td:last-child,
  thead tr:last-child th:last-child {
    /* bg color is important for th; just specify one */
    background-color: #fff;
  }
  th:last-child,
  td:last-child {
    padding-right: 6px !important;
    position: sticky;
    right: 0;
    z-index: 1;
  }
  td:last-child {
    box-shadow:  inset 1px 0px 0px 0px #bcbcbc;
  }
}

.coadmin-table-sticky-header-and-first-column {
  &.q-dark td:first-child,
  &.q-dark tr th {
    /* bg color is important for td; just specify one */
    background-color: $dark;
  }
  tr th,
  td:first-child {
    /* bg color is important for td; just specify one */
    background-color: #fff;
  }
  tr th {
    position: sticky;
    /* higher than z-index for td below */
    z-index: 2;
  }

  /* this will be the loading indicator */
  thead tr:last-child th {
    /* height of all previous header rows */
    top: 48px;
    /* highest z-index */
    z-index: 3;
  }
  thead tr:first-child th {
    top: 0;
    z-index: 1;
  }
  tr:first-child th:first-child {
    /* highest z-index */
    z-index: 3;
  }
  td:first-child {
    z-index: 1;
  }
  td:first-child, th:first-child {
    position: sticky;
    left: 0;
  }
}
.coadmin-table-sticky-header-and-last-column {
  td:last-child,
  th:last-child {
    padding-right: 6px !important;
  }
  td:last-child {
    box-shadow:  inset 1px 0px 0px 0px #bcbcbc;
  }

  &.q-dark td:last-child,
  &.q-dark tr th {
    /* bg color is important for td; just specify one */
    background-color: $dark;
  }
  tr th,
  td:last-child {
    /* bg color is important for td; just specify one */
    background-color: #fff;
  }
  tr th {
    position: sticky;
    /* higher than z-index for td below */
    z-index: 2;
    /* bg color is important; just specify one */
    // background: inherit;
  }

  /* this will be the loading indicator */
  thead tr:last-child th {
    /* height of all previous header rows */
    top: 48px;
    /* highest z-index */
    z-index: 3;
  }
  thead tr:first-child th {
    top: 0;
    z-index: 1;
  }
  tr:last-child th:last-child {
    /* highest z-index */
    z-index: 3;
  }
  td:last-child {
    z-index: 1;
  }
  td:last-child, th:last-child {
    position: sticky;
    right: 0;
  }
}
.coadmin-table-sticky-header-and-first-last-column {
  td:last-child,
  th:last-child {
    padding-right: 6px !important;
  }
  td:last-child {
    box-shadow:  inset 1px 0px 0px 0px #bcbcbc;
  }

  &.q-dark td:first-child,
  &.q-dark tr th {
    /* bg color is important for td; just specify one */
    background-color: $dark;
  }
  tr th,
  td:first-child {
    /* bg color is important for td; just specify one */
    background-color: #fff;
  }

  &.q-dark td:last-child,
  &.q-dark tr th {
    /* bg color is important for td; just specify one */
    background-color: $dark;
  }
  tr th,
  td:last-child {
    /* bg color is important for td; just specify one */
    background-color: #fff;
  }
  tr th {
    position: sticky;
    /* higher than z-index for td below */
    z-index: 2;
    /* bg color is important; just specify one */
    // background: inherit;
  }

  /* this will be the loading indicator */
  thead tr:last-child th {
    /* height of all previous header rows */
    top: 48px;
    /* highest z-index */
    z-index: 3;
  }
  thead tr:first-child th {
    top: 0;
    z-index: 1;
  }
  tr:last-child th:last-child {
    /* highest z-index */
    z-index: 3;
  }
  td:last-child {
    z-index: 1;
  }
  td:last-child, th:last-child {
    position: sticky;
    right: 0;
  }

  thead tr:first-child th {
    top: 0;
    z-index: 1;
  }
  tr:first-child th:first-child {
    /* highest z-index */
    z-index: 3;
  }
  td:first-child {
    z-index: 1;
  }
  td:first-child, th:first-child {
    position: sticky;
    left: 0;
  }
}
